import styles from './menu.module.less'
import { Form, Input, Button, Table, message, Popconfirm, Select } from 'antd'

import { useEffect, useState, useRef } from 'react'
import type { TableColumnsType } from 'antd'
import { TypeMenuListAPI, TypeEditMenuAPI } from '../../type/api'

import CreateMenu from './createMenu'
import { deleteMenuListAPI, getMenuListAPI } from '../../api/menuList'
function Menu() {
  //存储部门列表的数据
  const [menuList, setMenuList] = useState<TypeMenuListAPI[]>([])
  //获取部门列表的API方法
  useEffect(() => {
    getMenuListFn()
  }, [])

  //获取部门列表的API方法
  async function getMenuListFn() {
    const res = await getMenuListAPI()
    console.log(res)

    setMenuList(res)
  }
  //新增部门的方法----针对个别部门的添加
  function addMenuListItem(type: string, data: string) {
    //调用子组件的方法-打开弹窗
    //传的是父级部门的parentId
    refValue.current?.showModal('create', data)
    //调用子组件的方法-给子组件的表单赋值
  }
  //编辑部门的方法----针对个别部门的修改
  // 传的是整个部门的数据// record.parentId, record.deptName, record.userName
  function editMenuListItem(type: string, data: TypeEditMenuAPI) {
    //调用子组件的方法-打开弹窗
    // record.parentId, record.deptName, record.userName
    refValue.current?.showModal('edit', data)
  }
  //删除部门的方法
  async function delMenuListItem(id: string) {
    await deleteMenuListAPI({ id })
    message.success('删除成功')
  }

  // 确认删除气泡框
  const confirm = (id: string) => {
    delMenuListItem(id)
    message.success('删除成功')
  }
  // 取消删除气泡框
  const cancel = () => {
    message.error('取消删除')
  }

  //给Table传入列数据信息
  const columns: TableColumnsType<TypeMenuListAPI> = [
    {
      title: '菜单名称',
      dataIndex: 'menuName',
      key: 'menuName',
      width: '10%'
    },
    {
      title: '菜单图标',
      dataIndex: 'icon',
      key: 'icon',
      width: '10%'
    },
    {
      title: '菜单类型',
      dataIndex: 'menuType',
      key: 'menuType',
      width: '10%',
      render: (menuType: number) => {
        return {
          1: '目录',
          2: '菜单',
          3: '按钮'
        }[menuType]
      }
    },
    {
      title: '权限标识',
      dataIndex: 'menuCode',
      key: 'menuCode',
      width: '10%'
    },
    {
      title: '路由地址',
      dataIndex: 'path',
      key: 'path',
      width: '10%'
    },

    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      width: '30%'
    },

    {
      title: '操作',
      key: 'action',
      width: '20%',
      render: (_, record) => (
        <div>
          <Button
            onClick={() => {
              addMenuListItem('create', record.parentId)
            }}
          >
            新增
          </Button>
          <Button
            onClick={() => {
              editMenuListItem('edit', record)
            }}
          >
            编辑
          </Button>
          <Popconfirm
            title='温馨提示'
            description='确定删除该菜单吗?'
            onConfirm={() => confirm(record._id)}
            onCancel={cancel}
            okText='Yes'
            cancelText='No'
          >
            <Button danger>删除</Button>
          </Popconfirm>
        </div>
      )
    }
  ]
  //给Table传入数据源
  const data: TypeMenuListAPI[] = menuList
  // 获取表单实例
  const [form] = Form.useForm()
  // 搜索列表API
  async function searchList() {
    await getMenuListAPI(form.getFieldsValue(true))
    message.success('搜索成功')
  }
  // 重置搜索条件并刷新列表
  function resetList() {
    form.resetFields(['menuName'])
    getMenuListFn()
  }
  // 创建添加的部门弹窗
  function addMenuList() {
    refValue.current?.showModal('create')
  }
  //存储子组件的实例
  const refValue = useRef<{
    showModal: (type: string, data?: string | TypeMenuListAPI | TypeEditMenuAPI) => void
  }>()

  return (
    <div>
      <div className={styles.deptList}>
        <div className={styles.deptListTitle}>
          <Form layout='inline' form={form} labelAlign='right'>
            <div className={styles.headBox}>
              <Form.Item label='菜单状态' name='menuState'>
                <Select
                  style={{ width: 120 }}
                  options={[
                    {
                      value: 1,
                      label: '启用'
                    },
                    {
                      value: 2,
                      label: '禁用'
                    }
                  ]}
                />
              </Form.Item>
              <Form.Item name='menuName'>
                <div className={styles.deptListTitleInput}>
                  <div>菜单名称：</div>
                  <Input style={{ width: 300 }} />

                  <Button onClick={searchList} type='primary'>
                    搜索
                  </Button>
                  <Button onClick={resetList}>重置</Button>
                  <Button onClick={addMenuList}>新增 </Button>
                </div>
              </Form.Item>
            </div>
          </Form>
        </div>
        <Table rowKey='_id' style={{ width: '100%' }} columns={columns} dataSource={data} />;
      </div>
      <CreateMenu mref={refValue} getMenuListFn={getMenuListFn} menuList={menuList}></CreateMenu>
    </div>
  )
}

export default Menu
